<template>
  <van-popup
    :show="show"
    position="bottom"
    style="height: 30vh; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 10px"
    @close="emit('update:show', false)">
    <select :modelValue="provice.value" @change="changeProvice">
      <option :value="0">请选择省</option>
      <option v-for="item in options.provice" :key="item.value" :selected="item.value == provice.value" :value="item.value">{{ item.name ?? item.value }}</option>
    </select>
    <select :modelValue="city.value" @change="changeCity" :disabled="options.city.length == 0">
      <option :value="0">请选择市</option>
      <option v-for="item in options.city" :key="item.value" :selected="item.value == city.value" :value="item.value">{{ item.name ?? item.value }}</option>
    </select>
    <select :modelValue="region.value" @change="changeRegion" :disabled="options.region.length == 0">
      <option :value="0">请选择区</option>
      <option v-for="item in options.region" :key="item.value" :selected="item.value == region.value" :value="item.value">{{ item.name ?? item.value }}</option>
    </select>
  </van-popup>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { type ISelectItem } from '../types/popup';
import { getProviceApi, getCityApi, getRegionApi } from '../api/popup';

// 获取父组件传递的数据
const props = defineProps<{
  show: boolean;
  provice: ISelectItem;
  city: ISelectItem;
  region: ISelectItem;
}>();

// 向父组件传递数据
const emit = defineEmits<{
  (e: 'update:show', item: boolean): void;
  (e: 'update:provice', item: ISelectItem): void;
  (e: 'update:city', item: ISelectItem): void;
  (e: 'update:region', item: ISelectItem): void;
}>();

// 下拉选项
const options = reactive<{
  provice: ISelectItem[];
  city: ISelectItem[];
  region: ISelectItem[];
}>({
  provice: [],
  city: [],
  region: [],
});

onMounted(async () => {
  await getProviceApi().then((res) => {
    options.provice = res;
  });

  await getCityApi({ pid: props.provice.value }).then((res) => {
    options.city = res;
  });

  await getRegionApi({ pid: props.provice.value, cid: props.city.value }).then((res) => {
    options.region = res;
  });
});

// 切换省
const changeProvice = (e: any) => {
  const value = e.target.value;
  const provice = options.provice.find((item) => item.value == value) || { value: 0, name: '' };
  emit('update:provice', provice);
  emit('update:city', { value: 0, name: '' });
  emit('update:region', { value: 0, name: '' });
  getCityApi({ pid: value }).then((res) => {
    options.city = res;
    options.region = [];
  });
};
// 切换市
const changeCity = (e: any) => {
  const value = e.target.value;
  const city = options.city.find((item) => item.value == value) || { value: 0, name: '' };
  emit('update:city', city);
  emit('update:region', { value: 0, name: '' });
  getRegionApi({ pid: props.provice.value, cid: value }).then((res) => {
    options.region = res;
  });
};
// 切换区
const changeRegion = (e: any) => {
  const value = e.target.value;
  const region = options.region.find((item) => item.value == value) || { value: 0, name: '' };
  emit('update:region', region);
};
</script>

<style lang="scss" scoped>
select {
  font-size: 18px;
  padding: 5px;

  option {
    font-size: 16px;
  }
}
</style>
import {getProviceApi, getCityApi, getRegionApi} from '@/api/getProviceApi'; import {type ISelectItem} from "@/types/ISelectItem";
